<template>
  <div class="jifen-rule">
    <h1>会员积分规则</h1>
    <article>


      <h2>积分获取途径</h2>
      <h3>途径一：在果加上购买商品 </h3>
      <ul>
        <li>获取积分的计算规则为1元＝1积分；</li>
        <li>根据订单金额会得到对应的积分数量。</li>
      </ul>
      <h3>途径二：发布评价即可获得对应积分</h3>
      <ul>
        <li>发布10字以上的评价可获得100积分；</li>
        <li>评价并上传商品图片即可累计获得200积分；</li>
        <li>前5名评价可获得评价的双倍积分。</li>
      </ul>
      <h3>途径三：参加果加果加的积分活动</h3>
      <ul>
        <li>购买指定商品可获得指定积分。具体以活动详情为准。</li>
      </ul>
      <h2>不享受积分情况说明</h2>
      <ol>
        <li>使用优惠券的用户，不享受积分。</li>
        <li>订单中产生退换货的部分，不享受积分。</li>
      </ol>
      <h2>积分使用途径</h2>
      <ol>
        <li>购买商品可直接抵扣实付金额。</li>
        <li>参与积分兑换活动，具体以活动详情为准。</li>
      </ol>
      <h2>积分使用规则</h2>
      <ol>
        <li>100积分抵扣1元，积分不能抵扣运费。</li>
        <li>每笔订单积分最高抵扣该订单实付金额的50%</li>
        <li>满减活动：订单金额使用积分抵扣后未满足活动要
          也可以正常满减，不受限制。
        </li>
        <li>特殊商品或活动不能使用积分，详细以活动规则为
          准。
        </li>

      </ol>
      <h2>注意事项</h2>
      <ol>
        <li>通过“我的账户”——“我的积分”查看每笔积分
          到账情况以及相应积分来源。
        </li>
        <li>因商品质量原因引起的同类商品调换，不影响积分
          授予及使用。
        </li>
        <li>客户在收到商品后提出退货要求的，经对商品质量
          审核或双方协商后，予以退货的，当次交易所应当
          获得的积分将不授予，已经授予的，将予以扣除。
        </li>
      </ol>
    </article>
    <div class="return-btn" @click="goBack">
      <icon symbol="close"></icon>
    </div>
  </div>
</template>

<script>
  import Icon from '@components/icon'
  export default {
    components: {
      Icon
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      }
    }
  }
</script>

<style rel="stylesheet/less" lang="less">
  .jifen-rule {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    background-color: #fff;
    padding: 30/75rem;
    transition: all .3s ease;
    opacity: 1;
    padding: 1rem .316rem;
    .p-tit {
      font-size: 36/75rem;
      text-align: center;
      font-weight: bold;
    }
    article {
      margin-top: 56/75rem;
      line-height: 1.5;
    }
    .p-close {
      position: absolute;
      font-size: 50/75rem;
      left: 30/75rem;
      top: 30/75rem;
      line-height: 1;
      color: #959496;
    }

    &.rule-enter, &.rule-leave-to {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    h1 {
      text-align: center;
      font-size: 1.8em;
      color: #ffb230;
      position: relative;
      top: .5rem;
    }
    h2 {
      font-size: 1.3em;
      text-align: center;
      height: 2.2em;
      line-height: 2.2em;
      background-color: #ffb230;
      color: #fff;
      border-radius: 1.1em;
      margin: .8rem 0 .4rem;
    }
    h3 {
      font-size: 1.2em;
    }
    ul {
      margin: .2rem 0;
      li:before {
        content: '● ';
        color: #ffb230;
      }
    }
    ol {
      counter-reset: sectioncounter;
      li:before {
        content: counter(sectioncounter) ")";
        counter-increment: sectioncounter;
        margin-right: .5em;
      }
    }
    .return-btn {
      position: absolute;
      top: 30/75rem;
      left: 30/75rem;
      height: 64/75rem;
      width: 64/75rem;
      display: flex;
      justify-content: center;
      border-radius: 50%;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.7);
      .Icon {
        display: inline-block;
        width: 28/75rem;
        height: 28/75rem;
        fill: #fff;
      }
    }
  }
</style>
